<template>
    <UxPopper class="emb-dst-tip" placement="top">
        <span class="emb-dst-tip-content">
            <slot>
                .DST
            </slot>
        </span>

        <div slot="pop" class="emb-dst-tip-hover">
            <div class="emb-dst-tip-hover-text">
                The <strong>.dst</strong> file, a key format in the embroidery industry, serves as the instruction file
                for embroidery machines. It contains detailed directions for needle movements, thread selection, and
                stitch types, enabling intricate patterns to be stitched onto fabrics.
                (<a href="/document/embroidery-dst" target="_blank">What Is a DST File and How to Get One</a>)
            </div>
            <figure>
                <img src="https://img.podpartner.com/static/product_detail/dst-preview.png" alt="">
                <p>Chameleon.dst</p>
            </figure>
        </div>
    </UxPopper>
</template>
<script>
export default {
    name: "EmbDstTip",
    data () {
        return {
            show: false,
            timer: null
        }
    },
    methods: {
        handlerMouseEnter () {
            clearTimeout(this.timer)
            if (!this.show) this.show = true;
        },
        handlerMouseLeave () {
            clearTimeout(this.timer)
            if (this.show) {
                this.timer = setTimeout(() => {
                    this.show = false
                }, 300)
            }
        }
    }
}
</script>
<style scoped lang="scss">
.emb-dst-tip {
    position: relative;
    display: inline-block;
    // font-family: Roboto-Regular, Roboto;
    // color: #000;
    cursor: pointer;

    &::v-deep .popper-content {
        background: none;
    }

    .emb-dst-tip-content {
        text-decoration: underline;
        font-style: italic;
        cursor: pointer;

        &:hover {
            text-decoration: none;
            color: #757575;
        }
    }

    .emb-dst-tip-hover {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        width: 536px;
        padding: 16px;
        color: #000;
        transition: opacity 0.5s;
        cursor: default;

        background: #FFFFFF;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        border: 1px solid #E6E6E6;

        .emb-dst-tip-hover-text {
            flex: 1;
            font-family: Roboto-Regular, Roboto;
            font-size: 14px;
            color: #292929;
            line-height: 22px;
        }

        a {
            color: #087196;
            text-decoration: underline;
            cursor: pointer;
            border: none;

            &:hover {
                color: #075e7d;
                text-decoration: none;
            }
        }

        figure {
            margin-left: 18px;
            width: 96px;

            img {
                margin-left: 4px;
                width: 88px;
                height: 88px;
                background-color: #a3a3a3;
            }

            p {
                margin-top: 6px;
                width: 100%;
                text-align: center;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #555555;
                line-height: 16px;
            }
        }
    }
}

.emb-dst-tip::v-deep {
    .popper-name {
        cursor: pointer;
    }

    .popper-content {
        box-shadow: none;
        border-radius: 0;
        border: none;

        .arrow {
            display: none
        }
    }

}

@media (max-width: 960px) {
    .emb-dst-tip-hover {
        margin: 0 12px;
        align-items: center !important;
        width: calc(100% - 24px) !important;
    }
}
</style>
